<template>
	<view class="tryout">
		<view class="order-form">
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">单位名称</text>
				<input
					class="order-form-cell-value"
					type="text"
					:value="companyName"
					data-name="companyName"
					placeholder="请输入单位名称"
					@input="inputChange" />
			</view>
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">
					<text class="required color-important">*</text><text>联系人</text>
				</text>
				<input
					class="order-form-cell-value"
					type="text"
					:value="contactName"
					data-name="contactName"
					placeholder="请输入联系人"
					@input="inputChange" />
			</view>
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">性别</text>
				<radio-group @change="sexChange">
					<label class="radio"><radio value="male" :checked="gender === 'male'" />先生</label>
					<label class="radio"><radio value="female" :checked="gender === 'female'" />女士</label>
				</radio-group>
			</view>
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">
					<text class="required color-important">*</text>手机
				</text>
				<input
					class="order-form-cell-value"
					type="number"
					:value="phone"
					data-name="phone"
					placeholder="请输入电话"
					@input="inputChange" />
			</view>
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">微信号</text>
				<input
					class="order-form-cell-value"
					type="text"
					:value="wechat"
					data-name="wechat"
					placeholder="请输入微信号"
					@input="inputChange" />
			</view>
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">
					<text class="required color-important">*</text><text>用水人数</text>
				</text>
				<input
					class="order-form-cell-value"
					type="number"
					:value="peopleNum"
					data-name="peopleNum"
					placeholder="请输入用水人数"
					@input="inputChange" />
			</view>
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">使用性质</text>
				<picker class="flex-center" @change="bindPickerChange" :value="useObject" :range="array">
					<text>{{array[useObject]}}</text>
					<uni-icon type="arrowright" size="20" color="#666"></uni-icon>
				</picker>
			</view>
			<view class="order-form-cell flex-center-between">
				<text class="order-form-cell-name">水质分类</text>
				<radio-group @change="waterTypeChange">
					<label class="radio"><radio value="city" :checked="curWaterType === 'city'" />市政水</label>
					<label class="radio"><radio value="notcity" :checked="curWaterType === 'notcity'" />非市政水</label>
				</radio-group>
			</view>
		</view>
		
		<view class="select-address flex-center-between" @click="pageTo('address')">
			<view class="select-address-info" v-if="Object.keys(addressData).length !== 0">
				<view>
					<text class="select-address-info-name">{{addressData.addressName}}</text>
					<text class="select-address-info-mobile">{{addressData.addressPhone}}</text>
				</view>
				<view class="select-address-info-address text-overflow-two">
					{{addressData.addressArea}}
				</view>
			</view>
			<view class="select-address-info" v-if="Object.keys(addressData).length === 0">
				<text class="required color-important">*</text>
				<text class="grey">请选择收货地址</text>
			</view>
			<uni-icon type="arrowright" color="#666" size="20"></uni-icon>
		</view>
		
		<view class="notice">
			尊敬的客户: 请填写资料,或者直接拨打400-700-8090服务热线,工作人员马上为您服务。
		</view>
		
		<view class="agreement">
			<checkbox-group class="checkbox-group" @change="checkboxChange">
				<label>
					<checkbox value="1" :checked="agree"  />我已阅读并同意
				</label>
			</checkbox-group>
			<text class="color-important" @click="pageTo('agreement?type=0')">《服务协议》</text>
		</view>
		<view class="submit-btn">
			<button @click="submit">确定</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				goodsId: null,
				goodsImage: null,
				goodsName: null,
				goodsType: null,
				goodsNum: null,
				goodsMaxNum: null,
				goodsPrice: null,
				goodsPriceId: null,
				goodsServerPrice: null,
				leasePrice: null,
				leaseDays: null,
				addressData: {},
				companyName: '',
				contactName: '',
				phone: '',
				wechat: '',
				peopleNum: '',
				useObject: 0,
				gender: 'male',
				curWaterType: 'city',
				array: ['办公', '家用'],
				agree: false
			}
		},
		onLoad(option) {
			// 从路由中获取到商品到各项数据
			// console.log(option)
			this.goodsId = option.goodsId
			this.goodsImage = option.goodsImage
			this.goodsName = option.goodsName
			this.goodsType = option.goodsType
			this.goodsPriceId = option.goodsPriceId
			this.goodsNum = parseInt(option.goodsNum)
			this.goodsMaxNum = parseInt(option.goodsMaxNum)
			this.goodsServerPrice = parseFloat(option.goodsServerPrice)
			this.goodsPrice = parseFloat(option.goodsPrice)
			this.leaseDays = option.leaseDays
			this.leasePrice = parseFloat(option.leasePrice)
		},
		onShow() {
			this.getSelectedAddress()
		},
		methods: {
			/**
			 * 提交
			 */
			async submit() {
				if (!this.addressData.addressId) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
					return
				}
				if (!this.agree) {
					uni.showToast({
						title: '请先阅读并同意服务协议',
						icon: 'none'
					})
					return
				}
				if (!this.contactName) {
					uni.showToast({
						title: '联系人姓名必填',
						icon: 'none'
					})
					return
				}
				if (!this.checkPhone()) return
				if (isNaN(this.peopleNum) || this.peopleNum === '') {
					uni.showToast({
						title: '请输入正确用水人数',
						icon: 'none'
					})
					return
				}
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/submit',
					data: {
						products: [{
							pro_id : this.goodsId,
							quantity: this.goodsNum,
							spec_id: this.goodsPriceId,
						}],
						address_id: this.addressData.addressId,
						invoice_id: 0,
						contract_id: 0,
						coupon_id: 0,
						recommend: 0,
						pay_way: 0,
						trial_rent: JSON.stringify({
							companyName: this.companyName,
							contactName: this.contactName,
							phone: this.phone,
							wechat: this.wechat,
							peopleNum: this.peopleNum,
							useObject: this.array[this.useObject],
							gender: 'male',
							curWaterType: 'city'
						})
					}
				})
				if (res.status === 1) {
					this.payTryout(res.data.order_no);
					// uni.showToast({
					// 	title: '申请已提交',
					// 	icon: 'success'
					// })
					// let url = '/pages/index/tryoutResult?result=1&tryout=1'
					// // let url = 'pay?orderNum='+ res.data.order_no + '&couponMoney='+ res.data.coupon_price + '&orderMoney=' + res.data.orig_price
					// this.pageTo(url)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 支付
			 */
			async payTryout(order_no){
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/pay',
					data: {
						order_no: order_no,
						pay_way: 6, //支付类型 1支付宝 2微信 3对公转账 4他人支付 5线下支付 （默认微信支付，兼容以前没有传支付类型）
						trial_rent: {
							companyName: this.companyName,
							contactName: this.contactName,
							phone: this.phone,
							wechat: this.wechat,
							peopleNum: this.peopleNum,
							useObject: this.array[this.useObject],
							gender: 'male',
							curWaterType: 'city'
						}
					}
				})
				if (res.status === 1) {
					let url = '/pages/index/tryoutResult?result=1&tryout=1'
					// let url = 'pay?orderNum='+ res.data.order_no + '&couponMoney='+ res.data.coupon_price + '&orderMoney=' + res.data.orig_price
					this.pageTo(url)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 获取地址数据
			 */
			getSelectedAddress() {
				uni.getStorage({
					key: 'ADDRESS',
					success: res => {
						this.addressData = res.data
					}
				})
			},
			/**
			 * 校验手机号
			 */
			checkPhone() {
				if (!(/^1[3456789]\d{9}$/.test(this.phone))){
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false
				} else return true
			},
			/**
			 * 性别
			 * @param {Object} e
			 */
			sexChange(e) {
				this.gender = e.target.value
			},
			/**
			 * 水质
			 * @param {Object} e
			 */
			waterTypeChange(e) {
				this.curWaterType = e.target.value
			},
			/**
			 * 使用性质
			 * @param {Object} e
			 */
			bindPickerChange: function(e) {
				this.useObject = Number(e.target.value)
			},
			/**
			 * 监听表单数据更改
			 * @param {Object} e
			 */
			inputChange(e) {
				this[e.target.dataset.name] = e.detail.value
			},
			/**
			 * 服务协议
			 * @param {Object} e
			 */
			checkboxChange(e) {
				this.agree = e.detail.value[0] ? true : false
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.tryout{
		padding-top: 20rpx;
		.select-address{
			box-sizing: border-box;
			border-top: 1rpx solid $uni-border-color;
			padding: 30rpx 30rpx 30rpx 0;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;
			&-info{
				margin: 0 30rpx;
				width: 430rpx;
				padding-left: 20rpx;
				.grey{
					color: $uni-text-color-grey2;
					margin-left: 4rpx;
				}
				&-mobile{
					margin-left: 20rpx;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm2;
				}
				&-address{
					width: 450rpx;
					font-size: $uni-font-size-sm2;
				}
			}
			&-img{
				height: 68rpx;
				width: 68rpx;
				border-radius: 50%;
			}
		}
		.order-form{
			padding: 0 30rpx;
			background: $uni-bg-color;
			border-top: 1rpx solid $uni-border-color;
			&-cell{
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&:last-child{
					border-bottom: none;
				}
				&-name{
					color: $uni-text-color-grey2;
					padding-left: 20rpx;
					width: 200rpx;
					.required{
						position: absolute;
						left: 30rpx;
					}
				}
				&-value{
					text-align: right;
				}
				.radio{
					margin-left: 20rpx;
				}
			}
		}
		.notice{
			width: 690rpx;
			margin: 20rpx auto;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			background: #fff6e5;
			border-radius: $uni-border-radius-sm1;
			font-size: $uni-font-size-sm2;
		}
		.agreement{
			text-align: right;
			line-height: 100rpx;
			margin-right: 30rpx;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
			.checkbox-group{
				display: inline-block;
			}
		}

		.submit-btn{
			padding: 0 30rpx;
		}
	}
</style>
